<template>
    <div class="register-container">
      <section class="register-form-container">
        <el-form ref="forgotPwdForm" 
          :model="forgotPwdForm" 
          :rules="pwdResetRules" 
          class="register-form" 
          label-width="80px" 
          label-position="left"
          status-icon
          auto-complete="on">
          <h3 class="title">{{ $t('login.welcome') }}</h3>
          <div class="nva-container">
            <div class="bottom-border-box">
              <div class="content-box">
                <span class="nav-content">
                  {{ $t('login.resetPwdNavTitle') }}
                </span>
              </div>
              <div class="bottom-line"></div>
            </div>
          </div>
          <el-steps :active="stepActive" align-center class="step-indicator">
            <el-step :title="$t('login.forgotPwdStep1')"></el-step>
            <el-step :title="$t('login.forgotPwdStep2')"></el-step>
            <el-step :title="$t('login.forgotPwdStep3')"></el-step>
          </el-steps>
          <el-form-item v-if="stepActive === 0"
            :label="$t('login.userName')"
            prop="username">
            <el-input 
              v-model="forgotPwdForm.username"
              name="username" 
              type="text"
              value-key="username-input"
              auto-complete="off"
              :placeholder="$t('login.userNamePlaceHolder')"></el-input>
          </el-form-item>
          <el-form-item v-if="stepActive === 0"
            class="img-code-container"
            :label="$t('login.imgCode')"
            prop="imgCode">
            <el-input 
              class="img-code-input"
              v-model="forgotPwdForm.imgCode"
              name="imgCode" 
              type="text"
              auto-complete="off"
              value-key="'imgCode-input'"
              :placeholder="$t('login.imgCodePlaceHolder')"></el-input>
            <img v-if="!imgCodeLoading" src="@/assets/img-code.png" alt="$t('login.imgCode')">
            <img v-if="imgCodeLoading" src="" :alt="$t('login.loading')">
            <div class="change-code-box">
              <span class="change-code-text">
                  {{$t('login.notClear')}}
                  <a class="click-here" v-on:click.stop.prevent="handleChangeImgCodeRequest">{{$t('login.changeOne')}}</a>
              </span>
            </div>
          </el-form-item>
          <el-form-item v-if="stepActive === 1"
            :label="$t('login.userName')"
            prop="username">
            <el-input 
              v-model="forgotPwdForm.username"
              name="username" 
              type="text"
              auto-complete="off"
              :disabled="true"
              value-key="username-input"
              :placeholder="$t('login.userNamePlaceHolder')"></el-input>
          </el-form-item>
          <el-form-item v-if="stepActive === 1"
            :label="$t('login.validationCode')"
            prop="validationCode">
            <el-input 
              v-model="forgotPwdForm.validationCode"
              name="validationCode" 
              type="text"
              auto-complete="off"
              value-key="validationCode-input"
              :placeholder="$t('login.validationCodePlaceHolder')"
              class="sms-code-input"></el-input>
            <el-button 
              :loading="smsCodeLoading" 
              type="primary" 
              class="sms-code-button" 
              @click.native.prevent="handleSmsCodeRequest" 
              :disabled="smsCodeDownCount !== 0">
              {{ getSmsCodeButtonText }}
            </el-button>
          </el-form-item>
          <el-form-item v-if="stepActive === 2"
            :label="$t('login.password')"
            prop="password">
            <el-input 
              v-model="forgotPwdForm.password"
              name="password" 
              type="password"
              auto-complete="off"
              value-key="password-input"
              :placeholder="$t('login.passwordPlaceHolder')"></el-input>
          </el-form-item>
          <el-form-item v-if="stepActive === 2"
            :label="$t('login.confirmPasswordPlaceHolder')"
            prop="confirmPassword">
            <el-input 
              v-model="forgotPwdForm.confirmPassword"
              name="confirmPassword" 
              type="password"
              auto-complete="off"
              value-key="confirmPassword-input"
              :placeholder="$t('login.confirmPasswordPlaceHolder')"></el-input>
          </el-form-item>
          <el-form-item class="submit-button-container">
            <el-button :loading="submitLoading" type="primary" class="submit-button" style="width:100%;" @click.native.prevent="handleSubmit">
              {{ getSubmitButtonText }}
            </el-button>
          </el-form-item>
        </el-form>
    </section>
  </div>
</template>

<script>
import { isvalidUsername } from "@/utils/validate";

export default {
  name: "ForgotPassword",
  components: {},
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error(this.$t("login.userNameValidationTips")));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error(this.$t("login.passwordValidationTips")));
      } else {
        callback();
      }
    };
    return {
      forgotPwdForm: {
        ...this.accountValiditionForm,
        ...this.smsValiditionForm,
        ...this.resetPwdForm
      },
      accountValiditionForm: {
        username: '',
        imgCode: '',
      },
      smsValiditionForm: {
        username: '',
        validationCode: '',
      },
      resetPwdForm: {
        password: '',
        confirmPassword: '',
      },
      pwdResetRules: {
        ...this.accountValiditionRules,
        ...this.ValiditionRules,
        ...this.passwordRules
      },
      accountValiditionRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            validator: validateUsername,
            message: this.$t("login.userNameRequired")
          }
        ],
        imgCode: [
          {
            required: true,
            trigger: "blur",
            // validator: validateUsername,
            message: this.$t("login.imgCodeRequired")
          }
        ],
      },
      ValiditionRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            validator: validateUsername,
            message: this.$t("login.userNameRequired")
          }
        ],
        validationCode: [
          {
            required: true,
            trigger: "blur",
            // validator: validateUsername,
            message: this.$t("login.validationCodeRequired")
          }
        ],
      },
      passwordRules: {
        password: [
          {
            required: true,
            trigger: "blur",
            // validator: validateUsername,
            message: this.$t("login.passwordRequired")
          }
        ],
        confirmPassword: [
          {
            required: true,
            trigger: "blur",
            // validator: validateUsername,
            message: this.$t("login.confirmPasswordRequired")
          }
        ],
      },
      stepActive: 0,
      smsCodeLoading: false,
      smsCodeDownCount: 0,
      smsButtonText: this.$t("login.getValidationCode"),
      submitLoading: false,
      imgCodeLoading: false,
    };
  },
  created: function () {
    this.initFromByStep()
  },
  watch: {},
  methods: {
    initFromByStep() {
      if (this.stepActive === 0) {
        this.forgotPwdForm = {
          ...this.accountValiditionForm
        }
        this.pwdResetRules = {
          ...this.accountValiditionRules
        }
      } else if (this.stepActive === 1) {
        // 获取用户已输入的电话号
        const currentSmsValidationForm = Object.assign({}, this.smsValiditionForm)
        currentSmsValidationForm.username = this.forgotPwdForm.username
        this.forgotPwdForm = {
          ...(currentSmsValidationForm)
        }
        this.pwdResetRules = {
          ...this.ValiditionRules
        }
      } else if (this.stepActive === 2) {
        this.forgotPwdForm = {
          ...this.resetPwdForm
        }
        this.pwdResetRules = {
          ...this.passwordRules
        }
      }
    },
    handleSmsCodeRequest() {
      this.smsCodeLoading = true;
      this.smsCodeDownCount = 60;
      const timmerId = setInterval(() => {
        this.smsCodeDownCount--;
        if (this.smsCodeDownCount <= 0) {
          if (timmerId) {
            clearInterval(timmerId);
          }
        }
      }, 1000);
      this.smsCodeLoading = false;
    },
    handleChangeImgCodeRequest() {
      if (this.imgCodeLoading) {
        return
      }
      this.imgCodeLoading = true;
      const timmerId = setInterval(() => {
        if (timmerId) {
          clearInterval(timmerId);
        }
        this.imgCodeLoading = false;
      }, 2000);
      // this.imgCodeLoading = false;
    },
    handleSubmit() {
      this.$refs.forgotPwdForm.validate(valid => {
        if (valid) {
          this.submitLoading = true;

          if (this.stepActive === 0) {
            this.stepActive++
            this.initFromByStep()
            console.log('next =>', this.stepActive)
          } else if (this.stepActive === 1) {
            this.stepActive++
            this.initFromByStep()
            console.log('next =>', this.stepActive)
          } else if (this.stepActive === 2) {
            // this.initFromByStep()
            console.log('submit')
          }

          this.submitLoading = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  computed: {
    getEyeIcon() {
      return this.pwdType ? "eye" : "openeye";
    },
    getSmsCodeButtonText() {
      if (this.smsCodeDownCount > 0) {
        return this.$t("login.smsCodeWaitTips", {
          second: this.smsCodeDownCount
        });
      } else {
        return this.$t("login.getValidationCode");
      }
    }, 
    getSubmitButtonText() {
      if (this.stepActive === 2) {
        return this.$t("login.confirm");
      } else {
        return this.$t("login.next");
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$dark_gray: #889aa4;
$light_gray: #eee;
$black: #000;
$bg: $light_gray;
$white: #fff;
$font_color: #606266;
$font_weight: 500;
$font_size: 14px;
@import "@/styles/variables.scss";
.register-container {
  display: flex;
  justify-content: center;
  height: 80%;
  width: 90%;
  background-color: $white;
  flex-grow: 1;
  margin: 10px 0;
  overflow: auto;
  .register-form-container {
    width: 100%;
    .register-form {
      width: 450px;
      max-width: 100%;
      padding: 15px 20px;
      margin: 10px auto;
      .step-indicator {
        margin: 36px 0;
        .el-step__head .is-process {
          color: $themeColor;
          border-color: $themeColor;
        }
        .el-step__title.is-process {
          color: $themeColor;
        }
      }
      .img-code-container {
        .img-code-input {
          width: 68%;
        }
        img {
          height: 40px;
          width: 30%;
          vertical-align: middle;
        }
        .change-code-box {
          position: absolute;
          bottom: -31px;
          right: 0;
          text-align: right;
          font-size: 13px;
          .change-code-text {
            color: $font_color;
            .click-here {
              cursor: pointer;
              color: $themeColor;
            }
          }
        }
      }
      .sms-code-input {
        width: 57%;
      }
      .sms-code-button {
        padding: 12px 7px;
      }
      .company-select {
        .el-select {
          width: 100%;
        }
      }
      .submit-button-container {
        // display: flex;
        // justify-content: center;
        margin-top: 30px;
        .el-form-item__content {
          // width: 90% !important;
          // margin-left: 0 !important;
          .submit-button {
            background-color: $themeColor;
            border-color: $themeColor;
          }
        }
      }
    }
    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;
      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }
    .svg-container {
      padding: 3px 5px 3px 10px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
      &_login {
        font-size: 24px;
      }
    }
    .title {
      font-size: 2em;
      font-weight: 400;
      color: $black;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
    .nva-container {
      .bottom-border-box {
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        position: relative;
        .content-box {
          border-bottom: 3px solid rgba(207, 63, 36, 0.9);
          padding-bottom: 6px;
          width: 180px;
          text-align: center;
          z-index: 2;
          .nav-content {
            color: $themeColor;
            font-size: 1.3em;
            // font-weight: $font_weight;
          }
        }
        .bottom-line {
          position: absolute;
          border-bottom: 1px solid #cccccc;
          width: 110%;
          bottom: 0px;
          transform: translateX(0%);
          z-index: 1;
        }
      }
    }
  }
}
</style>
